<template>
  <view
    class="nav-box"
    :style="{
      'grid-template-columns': `repeat(${navBoxData.length}, 1fr)`,
    }"
  >
    <view v-for="(item, index) in navBoxData" @click="item.fn" :key="index">
      <view class="icon-bg" :style="{ backgroundColor: item.bgColor }">
        <text class="ali-icon" :class="[item.icon]" :style="{ color: item.iconColor }">
          {{ item.icon.includes('icon') ? '' : item.icon }}
        </text>
        <view v-if="item.num" :class="['badge-dot', item.num > 99 ? 'badge-dot__max' : '']">
          <text>{{ item.num > 99 ? '99+' : item.num }}</text>
        </view>
      </view>
      <text class="text">{{ item.text }}</text>
    </view>
  </view>
</template>
<script setup lang="ts">
  import type { FunctionArgs } from '@vueuse/core';
  import type { PropType } from 'vue';

  export interface INavBox {
    fn: FunctionArgs;
    text: string;
    icon: string;
    num?: number;
    bgColor: string;
    iconColor: string;
  }

  const props = defineProps({
    navBoxData: {
      type: Array as PropType<INavBox[]>,
      default: () => [],
    },
  });
</script>
<style lang="scss" scoped>
  .nav-box {
    display: grid;
    background-color: #ffffff;
    padding: 16rpx 32rpx;

    & > view {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12rpx;
      padding: 16rpx 0;

      .icon-bg {
        position: relative;
        width: 64rpx;
        height: 64rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        .ali-icon {
          font-size: 40rpx;
        }
        .badge-dot {
          position: absolute;
          top: -10%;
          right: -20%;
          width: 32rpx;
          height: 32rpx;
          background-color: #ea5e0e;
          color: #fff;
          border-radius: 50%;
          text-align: center;
          line-height: 32rpx;
          font-size: 16rpx;
          box-shadow: 2rpx 2rpx 2rpx 0px rgba(0, 0, 0, 0.2);
          &__max {
            border-radius: 24rpx;
            width: auto;
            padding: 0 8rpx;
          }
        }
      }
      .text {
        color: #323233;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 32rpx;
      }
    }
  }
</style>
